<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="shortcut icon" href="img/SL.ico" type="image/x-icon">
<link href="<%=basePath%>css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="<%=basePath%>css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="<%=basePath%>css/animate.css" rel="stylesheet">
<link href="<%=basePath%>css/style.css?v=4.1.0" rel="stylesheet">

<style type="text/css">
		.pag{
		margin-left:400px;
		width:500px;
		height:50px;
	}
		/* 三个按钮的颜色 */
	.btn{
		background:#395874;
	}
</style>

</head>
<body class="gray-bg">
				<div class="wrapper wrapper-content animated fadeInRight">
				<div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>消费记录查询</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="table_basic.html#">选项1</a>
                            </li>
                            <li>
                                <a href="table_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
					<!-- 查询按钮 -->
						<form action="<%=basePath%>PayServlet/findXiaofei?pageNum=1" >
							<div class="input-group">
							<input type="text" name="user_name" class="form-control" style="width:200px;margin-left:980px" placeholder="查询消费用户...">
							<span class="input-group-btn">
								<button class="btn btn-default " style="background:#395874" type="submit" >查询</button>
							</span>
							</div>
						</form>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                        	<th><input type="checkbox" id="all" /></th>
							<th>消费用户</th>
							<th>消费时间</th>
							<th>消费金额</th>
							<th>积分</th>
						</tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${payList}" var="pay">
					<tr>
						<td><input type="checkbox" name="pay_id" class="pay" pay_id="${pay.pay_id}" value="${pay.pay_id}"/></td> 
						<td>${pay.user_name}</td>
						<td>${pay.pay_time}</td>
						<td>${pay.pay_count}</td>
						<td>${pay.integral}</td>
					</tr>
					</c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
   				      <!-- 增删改三个按钮 -->
                      <div class="a pull-right" role="group" aria-label="...">
                      <button type="button" class="btn btn-default"
										style="margin-left: 30px;" onclick="add()" type="submit">增加</button>
									<button type="button" class="btn btn-default"
										style="margin-left: 30px;" onclick="edit()" type="submit">修改</button>
									<button type="button" class="btn btn-default"
										style="margin-left: 30px;" onclick="del()" type="submit">删除</button>
								</div>
        </div>
         
        </div>
          
<!-- 增加模块弹窗 -->
<div style="display: none;padding: 0px" class="" id="add">
    <form class="" action="${pageContext.request.contextPath}/PayServlet/add" method="post">
        <div class="control-group" style="margin:30px auto;">
            <label class="control-label" style="margin-right:13px;margin-left:50px;font-size:14px;">消费用户</label>
            <input name="user_name" type="text" style="width:150px;height:30px;" id="user_name">
        </div>
        <br>
        <div class="control-group">
            <label class="control-label" style="margin-right:13px;margin-left:50px;font-size:14px;">消费金额</label>
            <input name="pay_count" type="text" style="width:150px;height:30px;" id="pay_count">
        </div>
        <br>
       
        <div class="control-group "style="margin-top:30px;margin-left:170px;">
            <button type="submit" class="btn btn-primary" >添加</button>
        </div>
    </form>
</div>
<!-- 修改模块弹窗 -->
<div style="display: none;padding: 0px" class="" id="edit">
    <form class="" action="${pageContext.request.contextPath}/PayServlet/edit" method="post">
        <div class="control-group" style="margin:30px auto;">
            <label class="control-label" style="margin-right:13px;margin-left:50px;font-size:14px;">消费用户</label>
            <input name="user_name"text" style="width:150px;height:30px;" id="user_name1">
        </div>
        <br>
        <div class="control-group">
            <label class="control-label" style="margin-right:13px;margin-left:50px;font-size:14px;">消费金额</label>
            <input name="pay_count" type="text" style="width:150px;height:30px;" id="pay_count1">
        </div>
        <br>
        <div class="control-group">
            
            <input name="pay_id" type="text" style="display:none" id="pay_id">
        </div>
        <br>
        <div class="control-group "style="margin-top:30px;margin-left:170px;">
            <button type="submit" class="btn btn-primary" >修改</button>
        </div>
    </form>
</div>
			<!-- 分页页码 -->	
			<div class="pag">
			</div>
		</div>
		
</body>
<!-- 全局js -->
	<script src="<%=basePath%>js/jquery.min.js"></script>
	<script src="<%=basePath%>js/jquery.min.js?v=2.1.4"></script>
	<script src="<%=basePath%>js/bootstrap.min.js?v=3.3.6"></script>
	<script src="<%=basePath%>js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="<%=basePath%>js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="<%=basePath%>js/plugins/layer/layer.min.js"></script>

	<!-- 自定义js -->
	<script src="<%=basePath%>js/hplus.js?v=4.1.0"></script>
	<script src="<%=basePath%>js/contabs.js"></script>

	<!-- 第三方插件 -->
	<script src="<%=basePath%>js/plugins/pace/pace.min.js"></script>
	<script src="<%=basePath%>js/jquery-bootstrap-pagination .js"></script>
	

<!-- 增加按钮 -->
<script>
	function add(){
		layer.open({
			type: 1,
			content: $('#add').html(), 
			area: ['400px', '400px'],
			shadeClose: true,
			anim: 1,
			resize: true,
			title: [' 增加消费记录', 'font-size:20px;'],
			skin: 'layui-layer-l LayerCC', 
}
)
	}
</script>

<!-- 修改按钮 -->
<script>
function edit(){
	if($('.pay:checked').length==0){
		layer.alert('请选中后再进行修改', {icon: 2});
	}else if($('.pay:checked').length>1){
		layer.alert('只能选取一个进行修改', {icon: 2});
	}else{
		$.get('${pageContext.request.contextPath}/PayServlet/preEdit',
				{"pay_id":$('.pay:checked').attr('pay_id')},function(data){
				var pay = JSON.parse(data);
				console.log(pay);
				$("#user_name1").attr("value",pay[0].user_name);
				$("#pay_count1").attr("value",pay[0].pay_count);
				$("#pay_id").attr("value",pay[0].pay_id);
	layer.open({
			type: 1,
			content: $('#edit').html(), 
			area: ['400px', '300px'],
			shadeClose: true,
			anim: 1,
			resize: true,
			title: [' 修改消费记录 ', 'font-size:20px;'],
			skin: 'layui-layer-l LayerCC', 
}
)
}
)
}
}
</script>

<!-- 删除按钮 -->
	<script>
	function del(){
		$.get('${pageContext.request.contextPath}/PayServlet/removeById',
				$('.pay').serialize(),
				function(s){
			if(s==1){
				layer.msg('删除成功',function(){
					time:500,
					location.reload();
				})
				
			}else{
				layer.alert('请选中后再进行删除 ', {icon: 2});
			}
		});
	} 
	</script>
	<script type="text/javascript">
	$(".pag").pagination({
		total_pages:${pageCount},
		current_page:${pageNum},
		next:"下一页",
		prev:"上一页",
		display_max:4,
		callback : function(event, page) {
			location = "${pageContext.request.contextPath}/PayServlet/findAllBySplit?pageNum="+page;
		}
	}) 
	</script>
</html>